<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 4px;
        }

        .menu-button {
            background: none;
            border: none;
            cursor: pointer;
            padding: 5px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 22px;
        }

        .menu-line {
            width: 20px;
            height: 3px;
            background-color: black;
            border-radius: 2px;
        }

        .app-title {
            font-size: 18px;
            font-weight: bold;
        }

        .blue-circle {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: gray;
            transition: transform 0.1s;
        }

        .blue-circle-active {
            background-color: aqua !important;
        }

        .canvas-container {
            width: 100%;
        }

        #canvas {
            width: 100%;
            height: 100%;
            border: 2px solid black;
        }

        .canvas-contral {
            display: flex;
            justify-content: space-between;
            padding: 0 4vw;
        }

        .serial-contral {
            display: flex;
            padding: 0 2vw;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .serialtext {
            width: 100%;
            height: 260px;
            border: 2px solid black;
            display: flex;
            flex-direction: column;
        }

        .serialtext-recive-set {
            background-color: gray;
            justify-content: space-between;
            padding: 5px 3vw;
            display: flex;
            gap: 20px;
        }

        /* 数据收发区 */
        .serialtext-area {
            width: 100%;
            flex-grow: 1;
            overflow-y: auto;
            padding-left: 2vw;
        }

        /* 数据发送栏 */
        .serialtext-send {
            display: flex;
            margin-bottom: 5px;
        }

        #serialtext-send-input {
            flex-grow: 1;
            margin-left: 2vw;
            border: 1px solid black;
            /* 占据剩余空间 */
        }

        #serialtext-send-clear {
            font-size: 20px;
            position: relative;
            /* 设置相对定位 */
            left: -20px;
            /* 调整按钮位置 */
            border: none;
            background: none;
            /* 去除按钮边框 */
            transition: transform 0.1s;
            /* 添加过渡效果 */
        }

        #serialtext-send-clear:active {
            color: gray;
            transform: scale(0.8);
            /* 按下时缩小按钮 */
        }

        .serialtext-send-set {
            display: flex;
            justify-content: space-between;
            padding: 2px 10px;
        }

        .line {
            font-size: 14px;
            margin: 2px 0;
        }

        .line-tx {
            color: red;
        }

        .line-rx {
            color: green;
        }

        .conect-hint {
            position: absolute;
            background-color: red;
            border: 2px solid black;
            border-radius: 10px;
            top: 14px;
            right: 36px;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <!-- 顶部导航栏 -->
    <div class="navbar">
        <button class="menu-button">
            <div class="menu-line"></div>
            <div class="menu-line"></div>
            <div class="menu-line"></div>
        </button>
        <div class="app-title">WEBS V1.0.0</div>
        <button class="blue-circle"></button>
        <div class="conect-hint">点击连接-></div>
    </div>
    <!-- canvas画布 -->
    <div class="canvas-container">
        <canvas id="canvas"></canvas>
        <div class="canvas-contral">
            <div class="X-contral">
                <label>X</label>
                <button>&lt;</button>
                <button>&gt;</button>
            </div>
            <Button>AUTO</Button>
            <div class="Y-contral">
                <label>Y</label>
                <button>&lt;</button>
                <button>&gt;</button>
            </div>
        </div>
    </div>
    <hr>

    <!-- 串口参数修改 -->
    <div class="serial-contral">
        <!-- 波特率设置 -->
        <div>
            <label>波特率</label>
            <select class="baudrate">
                <option>9600</option>
                <option>19200</option>
                <option>38400</option>
                <option>57600</option>
                <option>115200</option>
            </select>
        </div>
        <!-- 数据位设置 -->
        <div>
            <label>数据位</label>
            <select class="data-bits">
                <option>8</option>
                <option>7</option>
                <option>6</option>
                <option>5</option>
            </select>
        </div>
        <!-- 停止位设置 -->
        <div>
            <label>停止位</label>
            <select class="stop-bits">
                <option>1</option>
                <option>2</option>
            </select>
            </select>
        </div>
        <!-- 校验位设置 -->
        <div>
            <label>校验位</label>
            <select class="parity">
                <option>无</option>
                <option>奇校验</option>
                <option>偶校验</option>
            </select>
        </div>
    </div>

    <!-- 数据收发区 -->
    <div class="serialtext">
        <!-- 数据接收控制器 -->
        <div class="serialtext-recive-set">
            <div>
                <label>编码方式</label>
                <select class="Encoding">
                    <option>UTF-8</option>
                    <option>GBK</option>
                </select>
            </div>
            <div>
                <label>接收方式</label>
                <select class="HEX">
                    <option>hex</option>
                    <option>str</option>
                </select>
            </div>
            <button id="serialtext-recive-set-clear">清空</button>
        </div>
        <!-- 文本消息栏 -->
        <div class="serialtext-area">
        </div>
        <!-- 数据发送文本栏 -->
        <div class="serialtext-send">
            <input id="serialtext-send-input" type="text" placeholder="输入要发送的数据">
            <button id="serialtext-send-clear">x</button>
        </div>
        <!-- 数据发送控制器 -->
        <div class="serialtext-send-set">
            <!-- 发送方式 -->
            <div>
                <label>发送方式</label>
                <select class="serialtext-send-contral">
                    <option>hex</option>
                    <option>str</option>
                </select>
            </div>
            <!-- 发送数据 -->
            <button id="serialtext-send-button">发送</button>
            <!-- 换行符 -->
            <div>
                <label>换行</label>
                <select class="serialtext-send-linefeed">
                    <option>无</option>
                    <option selected>\n</option>
                    <option>\r</option>
                    <option>\r\n</option>
                    <option>\n\r</option>
                </select>
            </div>

        </div>
    </div>

    <!-- JS代码 -->
    <script>
        //顶部导航栏dom对象
        const navbar = document.querySelector('.navbar');
        const blue_circle = document.querySelector('.blue-circle');
        let enable_serial = false;//打开接收的开关

        blue_circle.addEventListener('click', () => {
            enable_serial = !enable_serial;
            if (enable_serial) {
                blue_circle.style.backgroundColor = "blue";

                const floatLeft = document.querySelector('.conect-hint');
                if (floatLeft) {
                    navbar.removeChild(floatLeft);
                }
            } else {
                blue_circle.style.backgroundColor = "gray";
                    const connectHint = document.createElement('div');
                    connectHint.className = "conect-hint";
                    connectHint.textContent = "点击连接->";
                    navbar.append(connectHint);
            }
        })

        // 数据收发区的dom对象
        const serialtext_area = document.querySelector('.serialtext-area');
        const serserialtext_recive_set_clear = document.getElementById('serialtext-recive-set-clear');//
        const serialtext_send_input = document.getElementById('serialtext-send-input');
        const serialtext_send_clear = document.getElementById('serialtext-send-clear');
        const serialtext_send_button = document.getElementById('serialtext-send-button');

        // 清空数据接收区
        serserialtext_recive_set_clear.addEventListener('click', () => {
            serialtext_area.innerHTML = '';
        });

        // 清空发送文本框
        serialtext_send_clear.addEventListener('click', () => {
            serialtext_send_input.value = '';
        });

        // 发送按钮
        serialtext_send_button.addEventListener('click', () => {
            addLine(serialtext_send_input.value, 1);
            console.log('发送' + serialtext_send_input.value);
        });

        setInterval(() => {
            if (enable_serial) {
                addLine("s", 0);
                blue_circle.classList.toggle('blue-circle-active');
            }

        }, 10);//模拟接收数据


        // 连接WebSocket
        const ws = new WebSocket('ws://' + window.location.host + '/ws');
        // 接收消息并更新显示
        ws.onmessage = (event) => {
            if (enable_serial) {
                addLine(event.data, 0);
                blue_circle.classList.toggle('blue-circle-active');
            }
        };
    </script>

    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        // 设置点的颜色
        ctx.fillStyle = 'red';

        // 在坐标(100, 100)处绘制一个1x1像素的点
        ctx.fillRect(100, 100, 5, 5);
    </script>

    <script>
        // 添加新行
        function addLine(data, is_tx = 1) {
            const line = document.createElement('div');
            if (is_tx) {
                line.className = "line line-tx";
                line.textContent = "TX:" + data;
            } else {
                line.className = "line line-rx";
                line.textContent = "RX:" + data;
            }
            serialtext_area.appendChild(line);

            // 自动滚动到底部
            serialtext_area.scrollTop = serialtext_area.scrollHeight;
        }
    </script>

</body>

</html>